<template>
    <page-container>
        <view slot="header">
            <cu-custom :isBack="true" bgColor="bg-white">
                <block slot="content">核销记录</block>
            </cu-custom>
            <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
            <menu-tabs v-model="tabIndex" :tabs="tabs" :fixed="false" @change="tabBtn" backColor="transparent" lineColor="red"></menu-tabs>
        </view>
        <view slot="center" class="order-info-box">
            <mescroll ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                <!-- <view style="padding-top: 30rpx;"></view> -->
                <view class="order-status-item" v-for="(item, index) in listsList" :key="index" @click="toPlatformDetail(item)">
                    <view class="istimeandname">
                        <view class="timesi">{{ item.verify_time }}</view>
                        <view class="timename">核销员：{{ item.verifier_name }}</view>
                    </view>
                    <view class="item-info-box" v-for="(it, inx) in item.item_array" :key="inx">
                        <view class="item-imgs">
                            <image :src="it.img" mode=""></image>
                        </view>
                        <view class="item-info-text">
                            <view class="info-details-text">
                                <view class="text-title">{{ it.name }}</view>
                                <view style="padding-left: 46rpx;">
                                    <view class="info-price">￥{{ (Number(it.price) * it.num).toFixed(2) }}</view>
                                    <view class="info-price-num">X{{ it.num }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </mescroll>
        </view>
    </page-container>
</template>

<script>
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	name: 'Records',
	data() {
		return {
			tabs: ['订单自提', '虚拟商品'],
			tabIndex: 0,
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: '~ 空空如也 ~' // 提示
				}
			},
			page: 1,
			listsList: []
		}
	},
	onLoad(e) { },
	onShow(e) {
		this.tabIndex = Number(0)
	},
	created() {
	},
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			this.mescroll.resetUpScroll()
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			console.log('logpage', page)
			if (this.tabIndex == 0) {
				this.lists('pickup', page.num, 10)
			} else {
				this.lists('virtualgoods', page.num, 10)
			}
		},
		tabBtn(val) {
			this.tabIndex = val
			if (val == 0) {
				this.listsList = []
				this.lists('pickup', 1, 10)
			} else {
				this.listsList = []
				this.lists('virtualgoods', 1, 10)
			}
		},
		lists(verify_type, page, page_size) {
			this.$request.verifyLists({
				verify_type,
				page,
				page_size
			}).then(res => {
				this.mescroll.endSuccess(res.data.list.length)
				// console.log(res)
				var relist = res.data.list.map((item, index) => {
					item.verify_time = this.$util.formatDate(item.verify_time * 1000, true)
					return item
				})
				if (res.list.length > 0) {
					if (page == 1) {
						this.listsList = relist
						this.page = 1
					} else {
						this.listsList = this.listsList.concat(relist)
						this.page = page
					}
				}
			})
		},
		toPlatformDetail(item) {
			console.log(item)
			this.$util.redirectTo('/chatPages/verification/platformDetail', {
				codenumber: item.verify_code
			})
		}
	},
	mounted() { }
}
</script>

<style lang="scss" scoped>
/deep/.mescroll-uni {
    height: 100% !important;
}
image {
    width: 100%;
    height: 100%;
}

.order-info-box {
    .order-status {
        padding: 50rpx 0;

        .status-icon {
            width: 40rpx;
            height: 40rpx;
        }

        .order-status-name {
            margin-left: 20rpx;
            font-size: 36rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #ffffff;
        }
    }

    .order-status-item {
        width: 702rpx;
        height: auto;
        background: #ffffff;
        border-radius: 16rpx;
        margin: 20rpx auto 20rpx;
        padding-bottom: 23rpx;
    }

    .title-item {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
        padding-left: 20rpx;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
    }

    .item-info-box {
        margin: 0 auto;
        width: 94%;
        display: flex;
        justify-content: space-between;

        .item-imgs {
            width: 140rpx;
            height: 140rpx;
            background: #f4f4f4;
            border-radius: 16rpx;
        }

        .item-imgs image {
            border-radius: 16rpx;
        }

        .item-info-text {
            .info-details-text {
                display: flex;
                // padding-left: 30rpx;

                .text-title {
                    width: 335rpx;
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #000000;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4; //需要控制的文本行数
                    overflow: hidden;
                }

                .info-price {
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #000000;
                }

                .info-price-num {
                    font-size: 24rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #999999;
                    float: right;
                }
            }
        }
    }

    .inform-content-text {
        padding-top: 35rpx;
        padding-left: 22rpx;
        padding-right: 22rpx;

        .content-text-info {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999999;
            margin-bottom: 35rpx;
        }
    }
}

.list-top {
    display: flex;
    justify-content: flex-start;
    padding: 20rpx;

    .shop-icon {
        width: 32rpx;
        height: 32rpx;
    }

    .shop-name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
        padding-left: 10rpx;
        padding-right: 10rpx;
    }

    .right-icon {
        width: 14rpx;
        height: 24rpx;
    }
}

.istimeandname {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 33rpx;
    padding-bottom: 27rpx;
    padding-left: 23rpx;
    padding-right: 23rpx;

    .timesi {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
    }

    .timename {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #222222;
    }
}
</style>
